<template>
  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
      <div class="scroll-wrapper" ref="scrollWrapper" :style="{top:top + 'px'}">
          <slot></slot>
      </div>
  </div>
</template>

<script>
  
export default {
  name: 'index',
  data(){
      return {
          top:0
      }
  },
  methods:{
      handleScroll(e){
        //   console.log(e);
        // 1 获取两个元素
        const continerOffsetHeight = this.$refs.scrollContainer.offsetHeight;
        const wrapperOffsetHeight = this.$refs.scrollWrapper.offsetHeight;
 
        // 2 取出滚动的范围
        const yDelta = e.wheelDeltaY || -e.yDelta * 5; 
        // 3 判断
        if(yDelta > 0){
            this.top = Math.min(0,this.top + yDelta);
        }else{
            if(continerOffsetHeight - yDelta  < wrapperOffsetHeight){
                if(this.top < -(wrapperOffsetHeight - continerOffsetHeight + yDelta)){
                    this.top = this.top
                }else{
                    this.top = Math.max(this.top + yDelta,continerOffsetHeight  -  wrapperOffsetHeight - yDelta)
                }
            }else{
                 this.top = 0;
            }
        }

      }
  }
}
</script>

<style lang="less" scoped>
.scroll-container{
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    .scroll-wrapper{
        position: absolute;
        width: 100%;
        height: 100%;
    }
}
</style>